<template>
	<view>
		<up-popup :show="show" mode="bottom" :round="10" @close="handleClose">
			<view>
				<view class="picker-btn">
					<view class="cancel btn" @click="handleClose">取消</view>
					<view class="confirm btn" @click="handleConfirm">确认</view>
				</view>
				<picker-view :value="pickerValue" @change="bindChange" class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in datas" :key="index">{{ item }}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import { ref, watch } from 'vue'
	const props = defineProps({
		show:{
			type: Boolean,
			default: false
		},
		datas:{
			type:Array,
			defalut:()=>{
				return []
			}
		}
	})
	const emit = defineEmits(['update:show','close','confirm'])
	
	const showPopup = ref(false)
	const pickerValue = ref([0])
	
	const bindChange = (e)=>{
		pickerValue.value = e.detail.value
	}
	
	const handleClose = ()=>{
		emit('update:show',false)
		emit('close')
	}
	const handleConfirm = ()=>{
		emit('confirm',props.datas[pickerValue.value[0]])
		handleClose()
	}
	
	watch(()=>props.show,(val)=>{
		showPopup.value = val
	})
</script>

<style lang="scss">
	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
	}
	.item {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 50px;
		font-size: 34rpx;
		color: #333;
	}
	.picker-btn{
		display: flex;
		justify-content: space-between;
		.btn{
			padding: 30rpx;
			font-size: 32rpx;
		}
		.cancel{
			color: #CCCCCC;
		}
		.confirm{
			color: #F5564D;
		}
	}
</style>